<template>
  <div class="container">
    <i class="el-icon-minus"
       style="transform:rotate(90deg);position:absolute;z-index: 4;left:1500px;margin-top:-10px;"></i>
    <p>推荐课程<a href="#">更多>>></a></p>

    <el-row type="flex"
            class="row-bg"
            justify="space-around">
      <!--对所有课程遍历-->
      <el-col :span="4"
              v-for="(item,index) in classinfo"
              :key="index">
        <div class="grid-content bg-purple">
          <img :src="item.pic_address"
               style="float:left;margin-left:5px;width:110%;height:110%"
               alt="图片不见啦">
          <span id="special">{{item.type}}</span>
          <span id="classname">{{item.name}}</span>
          <div id="info">
            <p class="normalize">{{item.teacher}}</p>
            <p class="normalize">{{item.academy}}</p>
            <p class="normalize">{{item.time}}</p>
          </div>
          <p id="final">{{item.info}}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  <script>
import { mapActions, mapState } from 'vuex'
export default {
  name: 'classitem',
  methods: {
    ...mapActions(['getfrontdata']),
  },
  computed: {
    ...mapState(['classinfo']),
  },
  beforeMount() {
    this.getfrontdata()
  },
}
</script>
  
  <style scoped>
.container {
  width: 1440px;
  margin: 20px auto;
  text-align: left;
  text-indent: 2em;
}
.container p {
  font-size: 20px;
  font-weight: bold;
}
.container p a {
  font-size: 20px;
  font-weight: normal;
  width: 100px;
  margin-left: 1200px;
  text-decoration: none;
}
.container p a:hover {
  color: orange;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  /* background: #d3dce6; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  /* background-color: #f9fafc; */
}
#special {
  margin-left: -20px;
  color: #fff;
  display: inline;
  padding: 3px;
  width: fit-content;
  height: fit-content;
  background-color: chocolate;
}
.container div p.normalize {
  margin-left: 10px;
  text-indent: 0px;
  font-size: 10px;
  color: darkgray;
}
div#info {
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
#classname {
  margin-left: 5px;
}
.container div p#final {
  font-weight: normal;
  margin-left: 10px;
  text-indent: 0px;
  font-size: 10px;
  color: darkgray;
  text-overflow: ellipsis;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
  overflow: hidden;
  word-wrap: break-word;
}
</style>
  